{% if latest_question_list %}
    <div class="barbie-poll-container">
        <div class="barbie-crown"></div>
        <div class="barbie-poll-header">
            <h2>✨ 芭比梦幻投票城堡 ✨</h2>
            <div class="barbie-wand"></div>
        </div>
        
        <div class="barbie-carriage">
            <ul class="barbie-question-list">
                {% for question in latest_question_list %}
                <li class="barbie-question-item">
                    <a href="{% url 'polls:detail' question.id %}" class="barbie-question-link">
                        <span class="barbie-icon">👑</span>
                        <span class="barbie-question-text">{{ question.question_text }}</span>
                        <span class="barbie-sparkle">✨</span>
                    </a>
                    <div class="barbie-hearts">
                        <span>❤️</span>
                        <span>💖</span>
                        <span>💗</span>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
        
        <div class="barbie-footer">
            <div class="barbie-shoes"></div>
            <p class="barbie-footer-note">选择你最喜欢的选项，成为投票公主！</p>
            <div class="barbie-jewel"></div>
        </div>
    </div>
{% else %}
    <div class="barbie-no-polls">
        <div class="barbie-tiara"></div>
        <div class="barbie-sad-face">💔</div>
        <p class="barbie-no-polls-text">目前没有可用的投票，公主殿下</p>
        <div class="barbie-suggest">
            <p>要不要创建一个梦幻新投票？</p>
            <button class="barbie-button">✨ 创建魔法投票 ✨</button>
        </div>
        <div class="barbie-stars">
            <span>⭐</span>
            <span>🌟</span>
            <span>💫</span>
        </div>
    </div>
{% endif %}

<style>
    /* 梦幻芭比主题样式 */
    :root {
        --barbie-pink: #ffd6e7;
        --barbie-dark-pink: #ff9bb8;
        --barbie-light-pink: #fff0f7;
        --barbie-accent: #ff69b4;
        --barbie-purple: #d14d8b;
        --barbie-gold: #ffd700;
    }
    
    body {
        background-color: var(--barbie-light-pink);
        font-family: 'Arial', sans-serif;
    }
    
    .barbie-poll-container {
        background: linear-gradient(135deg, var(--barbie-light-pink), var(--barbie-pink));
        border: 3px solid var(--barbie-accent);
        border-radius: 25px;
        padding: 30px;
        margin: 30px auto;
        max-width: 650px;
        box-shadow: 0 10px 25px rgba(255, 105, 180, 0.25);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    
    .barbie-poll-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 8px;
        background: linear-gradient(to right, var(--barbie-accent), #ffb6c1, var(--barbie-accent));
        z-index: 2;
    }
    
    .barbie-poll-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%23ffb6c1" stroke-width="0.5"/></svg>');
        opacity: 0.1;
        z-index: -1;
    }
    
    .barbie-crown {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 40px;
        background-color: var(--barbie-gold);
        clip-path: polygon(0% 100%, 10% 40%, 30% 60%, 50% 20%, 70% 60%, 90% 40%, 100% 100%);
        z-index: 3;
    }
    
    .barbie-poll-header {
        text-align: center;
        margin-bottom: 30px;
        position: relative;
        padding-top: 20px;
    }
    
    .barbie-poll-header h2 {
        color: var(--barbie-purple);
        font-size: 2em;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        margin: 0;
        background: linear-gradient(to right, var(--barbie-purple), var(--barbie-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 1px;
    }
    
    .barbie-wand {
        width: 35px;
        height: 100px;
        background: linear-gradient(to bottom, var(--barbie-accent), var(--barbie-pink));
        margin: 15px auto;
        border-radius: 50% 50% 5px 5px;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .barbie-wand::after {
        content: "🌟";
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2em;
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
    }
    
    .barbie-carriage {
        background-color: white;
        border-radius: 20px;
        padding: 25px;
        margin: 0 -10px;
        box-shadow: inset 0 0 15px rgba(255, 182, 193, 0.5);
        position: relative;
        overflow: hidden;
    }
    
    .barbie-carriage::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        background: linear-gradient(to right, var(--barbie-pink), white, var(--barbie-pink));
    }
    
    .barbie-question-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .barbie-question-item {
        margin-bottom: 20px;
        transition: all 0.4s;
        position: relative;
    }
    
    .barbie-question-item:hover {
        transform: translateX(15px);
    }
    
    .barbie-question-link {
        display: flex;
        align-items: center;
        padding: 15px 25px;
        background: linear-gradient(to right, var(--barbie-light-pink), white);
        border: 2px solid var(--barbie-dark-pink);
        border-radius: 50px;
        color: var(--barbie-purple);
        text-decoration: none;
        font-weight: bold;
        transition: all 0.4s;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    
    .barbie-question-link::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: linear-gradient(to right, var(--barbie-pink), var(--barbie-light-pink));
        transition: width 0.4s;
        z-index: -1;
    }
    
    .barbie-question-link:hover::before {
        width: 100%;
    }
    
    .barbie-question-link:hover {
        border-color: var(--barbie-accent);
        box-shadow: 0 6px 12px rgba(255, 105, 180, 0.3);
    }
    
    .barbie-icon {
        margin-right: 15px;
        font-size: 1.2em;
        transition: transform 0.3s;
    }
    
    .barbie-question-text {
        flex-grow: 1;
        transition: all 0.3s;
    }
    
    .barbie-question-link:hover .barbie-icon {
        transform: rotate(15deg) scale(1.2);
    }
    
    .barbie-question-link:hover .barbie-question-text {
        letter-spacing: 0.5px;
    }
    
    .barbie-sparkle {
        margin-left: 15px;
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
    }
    
    .barbie-question-link:hover .barbie-sparkle {
        opacity: 1;
        transform: rotate(360deg);
    }
    
    .barbie-hearts {
        position: absolute;
        top: -10px;
        right: -10px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .barbie-question-item:hover .barbie-hearts {
        opacity: 1;
    }
    
    .barbie-hearts span {
        display: inline-block;
        margin: 0 2px;
        animation: float 3s infinite ease-in-out;
    }
    
    .barbie-hearts span:nth-child(1) { animation-delay: 0s; }
    .barbie-hearts span:nth-child(2) { animation-delay: 1s; }
    .barbie-hearts span:nth-child(3) { animation-delay: 2s; }
    
    .barbie-footer {
        text-align: center;
        margin-top: 30px;
        position: relative;
        padding: 15px 0;
    }
    
    .barbie-footer-note {
        font-style: italic;
        color: var(--barbie-purple);
        font-size: 1.1em;
        margin: 15px 0;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .barbie-shoes {
        width: 60px;
        height: 30px;
        background-color: var(--barbie-accent);
        margin: 0 auto;
        clip-path: polygon(0% 100%, 20% 0%, 80% 0%, 100% 100%);
        transform: rotate(180deg);
        opacity: 0.7;
    }
    
    .barbie-jewel {
        width: 15px;
        height: 15px;
        background-color: var(--barbie-gold);
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 10px var(--barbie-gold);
    }
    
    /* 没有投票时的样式 */
    .barbie-no-polls {
        text-align: center;
        padding: 40px 30px;
        background: linear-gradient(135deg, var(--barbie-light-pink), white);
        border-radius: 25px;
        border: 3px dashed var(--barbie-accent);
        max-width: 500px;
        margin: 30px auto;
        position: relative;
        overflow: hidden;
    }
    
    .barbie-no-polls::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border: 2px solid rgba(255, 182, 193, 0.3);
        border-radius: 30px;
        pointer-events: none;
    }
    
    .barbie-tiara {
        width: 100px;
        height: 20px;
        background-color: var(--barbie-gold);
        clip-path: polygon(0% 100%, 10% 0%, 30% 50%, 50% 0%, 70% 50%, 90% 0%, 100% 100%);
        margin: 0 auto 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .barbie-sad-face {
        font-size: 3.5em;
        margin-bottom: 20px;
        animation: bounce 2s infinite;
    }
    
    .barbie-no-polls-text {
        color: var(--barbie-purple);
        font-size: 1.3em;
        margin-bottom: 25px;
        position: relative;
        display: inline-block;
    }
    
    .barbie-no-polls-text::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, transparent, var(--barbie-accent), transparent);
    }
    
    .barbie-suggest {
        background-color: white;
        padding: 20px;
        border-radius: 20px;
        margin: 0 auto;
        max-width: 80%;
        box-shadow: 0 4px 8px rgba(255, 105, 180, 0.2);
    }
    
    .barbie-suggest p {
        margin-bottom: 15px;
        color: var(--barbie-purple);
    }
    
    .barbie-button {
        background: linear-gradient(to right, var(--barbie-accent), var(--barbie-purple));
        color: white;
        border: none;
        padding: 12px 25px;
        border-radius: 50px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
        position: relative;
        overflow: hidden;
    }
    
    .barbie-button::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(45deg);
        transition: all 0.5s;
    }
    
    .barbie-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(255, 105, 180, 0.6);
    }
    
    .barbie-button:hover::before {
        left: 100%;
    }
    
    .barbie-stars {
        position: absolute;
        top: 20px;
        right: 20px;
    }
    
    .barbie-stars span {
        display: block;
        margin-bottom: 5px;
        opacity: 0.6;
        animation: twinkle 2s infinite alternate;
    }
    
    .barbie-stars span:nth-child(1) { animation-delay: 0s; }
    .barbie-stars span:nth-child(2) { animation-delay: 0.5s; }
    .barbie-stars span:nth-child(3) { animation-delay: 1s; }
    
    /* 动画效果 */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    @keyframes twinkle {
        0% { opacity: 0.3; transform: scale(0.8); }
        100% { opacity: 1; transform: scale(1.2); }
    }
    
    /* 响应式设计 */
    @media (max-width: 650px) {
        .barbie-poll-container {
            padding: 20px 15px;
            margin: 20px 15px;
            border-radius: 20px;
        }
        
        .barbie-poll-header h2 {
            font-size: 1.6em;
        }
        
        .barbie-carriage {
            padding: 15px;
        }
        
        .barbie-question-link {
            padding: 12px 20px;
        }
        
        .barbie-no-polls {
            padding: 30px 20px;
        }
    }
</style>
<div class="barbie-admin-container">
    <a href="/admin/" class="barbie-admin-button">
        <span class="barbie-admin-icon">👑</span>
        <span class="barbie-admin-text">进入魔法管理城堡</span>
        <span class="barbie-admin-sparkles">
            <span>✨</span>
            <span>✨</span>
        </span>
    </a>
</div>

<style>
    /* 管理按钮样式 - 芭比主题 */
    .barbie-admin-container {
        text-align: center;
        margin: 30px 0;
        position: relative;
    }
    
    .barbie-admin-button {
        display: inline-flex;
        align-items: center;
        padding: 15px 30px;
        background: linear-gradient(145deg, #ff9bb8, #ff6b9d);
        color: white;
        text-decoration: none;
        font-weight: bold;
        border-radius: 50px;
        font-size: 1.1em;
        box-shadow: 0 6px 15px rgba(255, 105, 180, 0.4);
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
        border: 2px solid #ffd6e7;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }
    
    .barbie-admin-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: 0.5s;
    }
    
    .barbie-admin-button:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 10px 25px rgba(255, 105, 180, 0.6);
        background: linear-gradient(145deg, #ff6b9d, #ff4785);
    }
    
    .barbie-admin-button:hover::before {
        left: 100%;
    }
    
    .barbie-admin-icon {
        margin-right: 12px;
        font-size: 1.3em;
        transition: transform 0.3s;
    }
    
    .barbie-admin-button:hover .barbie-admin-icon {
        transform: rotate(15deg) scale(1.2);
    }
    
    .barbie-admin-text {
        position: relative;
        z-index: 1;
    }
    
    .barbie-admin-sparkles {
        margin-left: 12px;
        display: flex;
        flex-direction: column;
    }
    
    .barbie-admin-sparkles span {
        display: inline-block;
        opacity: 0;
        transition: all 0.3s;
    }
    
    .barbie-admin-sparkles span:nth-child(1) {
        transform: translateY(5px);
    }
    
    .barbie-admin-sparkles span:nth-child(2) {
        transform: translateY(-5px);
    }
    
    .barbie-admin-button:hover .barbie-admin-sparkles span {
        opacity: 1;
        transform: translateY(0);
    }
    
    .barbie-admin-container::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        height: 3px;
        background: linear-gradient(to right, transparent, #ff9bb8, transparent);
        opacity: 0.7;
    }
    
    /* 响应式设计 */
    @media (max-width: 650px) {
        .barbie-admin-button {
            padding: 12px 25px;
            font-size: 1em;
        }
    }
</style>